<template>
	<view>
		<li v-for="(item,index) in list" :key="index" class="viewItem">
			<div class="left">
				<p class="name">{{item.type|typeFilter}}</p>
				<p class="time">{{item.insdt|timeFilter}}</p>
			</div>
			<div class="right">
				<p>+{{item.income}}</p>
			</div>
		</li>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				list: [],
				rows: 20,
				busy: true,
				scroll: 0,
				incomeType: 0,
				prop: 0,
				rowStart: 0,
				isLoadMore: false, //是否加载中
			}
		},
		mounted() {
			this.list=[]
		},
		onShow() {
			this.list=[]
			this.loadMoreFunc();
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.rowStart += 20
				this.loadMoreFunc();
			}

		},
		methods: {
			loadMoreFunc() {
				this.status = 'loading';

				var data = {
					url: '/web/v2/api/userExtend/incomeDiamondHistory',
					methods: 'post',
					data: {
						rowStart: this.rowStart,
						rows: this.rows,
						incomeType: this.incomeType
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						if (res.data.data.incomeList) {
							this.list = this.list.concat(res.data.data.incomeList)
							if (res.data.data.incomeList.length == 0||res.data.data.incomeList.length <20) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.status = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.status = 'nomore'
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
					}
					// this.list = res.data.data.incomeList
					// this.list = this.list.concat(res.data.data.incomeList);
					// if(res.data.data.incomeList==''){
					// 	this.status = 'noMore';
					// }
				})
			}
		},
		filters: {
			typeFilter: function(val) {
				var status = '';
				switch (val) {
					case "12":
						status = '钻石礼物';
						break;
					case "14":
						status = '开启动态';
						break;
					case "15":
						status = '视频打赏';
						break;
					case "16":
						status = '活动';
						break;
					case "17":
						status = '家族收入';
						break;
					case "18":
						status = '订单收入';
						break;
					case "19":
						status = '订单退款';
						break;
					case "21":
						status = '守护收入';
						break;
					case "22":
						status = '聊天室贵宾席';
						break;
					case "30":
						status = '现金收入转入';
						break;
					default:
						status = '其他收入';
						break;
				}
				return status;
			},
			timeFilter: function(value) {
				var date
				if (value) {
					if (value.length !== 10) {
						date = new Date(parseInt(value))
					} else {
						date = new Date(parseInt(value * 1000))
					}
					var Y = date.getFullYear() + '-'
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
					return Y + M + D + h + m + s
				} else {
					return '——'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.viewItem {
		width: 100%;
		padding: 27upx 0;
		margin: 0 auto 27upx;
		background: #fff;
	}

	.viewItem .top {
		width: 100%;
		height: 67upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.viewItem .top .name {
		font-size: 37upx;
	}

	.viewItem .bottom {
		width: 100%;
		height: 67upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		border-top: 3upx solid #ddd;
	}

	.viewItem .bottom .num {
		font-size: 37upx;
	}

	.none {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%);
		font-size: 37upx;
	}

	.viewItem {
		width: 90%;
		height: 100upx;
		padding-top: 27upx;
		border-bottom: 2upx solid #ddd;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.viewItem .left .name {
		font-size: 37upx;
	}

	.viewItem .left .time {
		font-size: 27upx;
		color: #999;
	}

	.viewItem .right {
		font-size: 37upx;
		font-weight: bold;
		letter-spacing: 2upx;
	}
</style>
